<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AI Cloud</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">AI Cloud</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul id="chat-nav"  class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content"
                lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-tongyi-content"><a href="javascript:;">通义千问</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-xunfei-content"><a href="javascript:;">讯飞星火</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-doubao-content"><a href="javascript:;">豆包</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-deepseek-content"><a href="javascript:;">DeepSeek</a></li>
        </ul>

        <ul id="draw-nav"  class="layui-nav layui-layout-left" style="display: none;">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-xunfei-content"><a href="javascript:;">讯飞星火</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-doubao-content"><a href="javascript:;">豆包</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-deepseek-content"><a href="javascript:;">DeepSeek</a></li>
        </ul>

        <ul id="discuss-nav" class="layui-nav layui-layout-left" style="display:none">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
            lay-data="discuss-content"><a href="javascript:;">推荐</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="discuss-content-new"><a href="javascript:;">最新</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <div id="user_info_div">
                    <a href="javascript:;">
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        <span id="username_span"></span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">设置</a></dd>
                        <dd lay-on="loginOut"><a href="javascript:;">退出</a></dd>
                    </dl>
                </div>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">AI 工具箱</a>
                    <dl class="layui-nav-child">
                        <dd><a class="layui-this" href="javascript:;" lay-on="chat-nav-show">对话</a></dd>
                        <dd><a href="javascript:;" lay-on="draw-nav-show" >绘图</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">话题讨论</a>
                    <dl class="layui-nav-child">
                        <dd><a lay-on="discuss-nav-show"  href="javascript:;" >话题列表</a></dd>
                        <dd><a lay-on="show-my-discuss-list" href="javascript:;" >我的话题</a></dd>
                        <dd><a lay-on="add-discuss" href="javascript:;"  >发表话题</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-on="about-nav-show"><a href="javascript:;">关于</a></li>
            </ul>
            <div id="unlogin_btn_div" style="position: absolute;bottom: 40px;text-align: center;width: 80%">
                <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" lay-on="doLogin">未登录</button>
            </div>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->

        <div style="padding-top: 15px;padding-bottom: 80px">
            <div id="chat-chatgpt-content"></div>

            <div id="chat-tongyi-content" class="layui-card layui-panel" style="display:none"></div>

            <div id="chat-xunfei-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    Xunfei提出的问题
                </div>
                <div class="layui-card-body">
                    Xunfei回答的答案
                </div>
            </div>

            <div id="chat-wenxin-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    Wenxin提出的问题
                </div>
                <div class="layui-card-body">
                    Wenxin回答的答案
                </div>
            </div>
            <div id="chat-doubao-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    doubao提出的问题
                </div>
                <div class="layui-card-body">
                    doubao回答的答案
                </div>
            </div>
            <div id="chat-deepseek-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    deepseek提出的问题
                </div>
                <div class="layui-card-body">
                    deepseek回答的答案
                </div>
            </div>

            <div id="draw-chatgpt-content"  style="display:none"></div>

            <div id="draw-tongyi-content" class="layui-card layui-panel" style="display:none"></div>

            <div id="draw-xunfei-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    绘图Xunfei提出的问题
                </div>
                <div class="layui-card-body">
                    绘图Xunfei回答的答案
                </div>
            </div>

            <div id="draw-wenxin-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    绘图Wenxin提出的问题
                </div>
                <div class="layui-card-body">
                    绘图Wenxin回答的答案
                </div>
            </div>
             <div id="draw-doubao-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    绘图doubao提出的问题
                </div>
                <div class="layui-card-body">
                    绘图doubao回答的答案
                </div>
            </div>
            <div id="draw-deepseek-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    绘图deepseek提出的问题
                </div>
                <div class="layui-card-body">
                    绘图deepseek回答的答案
                </div>
            </div>

            <div id="discuss-content"  style="display:none">
                <div class="layui-card layui-panel">
                    <div class="layui-card-header layui-font-16">
                        推荐话题讨论
                    </div>
                    <div class="layui-card-body">
                        推荐话题讨论详情
                    </div>
                </div>
                <div id="discuss-laypage-normal"></div>
            </div>

            <div id="discuss-content-new" class="layui-card layui-panel" style="display:none">
                <div class="layui-card layui-panel">
                    <div class="layui-card-header layui-font-16">
                        最新话题讨论
                    </div>
                    <div class="layui-card-body">
                        最新话题讨论详情
                    </div>
                </div>
                <div id="discuss-new-laypage-normal"></div>
            </div>

            <div id="my-discuss-content"  style="display:none">
                <div class="layui-bg-gray" style="padding: 16px;">
                    <div id="my-discuss-list" class="layui-row layui-col-space15">
                    </div>
                </div>
            </div>

            <div id="add-discuss-content"  style="display:none">
                <div class="layui-input-group" style = "width: 80%;margin-top: 50px">
                    <div class="layui-input-prefix" style="width: 200px;">标题</div>
                    <input id="discuss-title-input" type="text" class="layui-input">
                </div>
                <div class="layui-input-group" style = "width: 80%;margin-top: 50px">
                    <div class="layui-input-prefix" style="width: 200px;">正文</div>
                    <textarea id="discuss-content-input" name="" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
                <div style = "margin-top: 50px;text-align: center">
                    <button type="button" style="width: 20%" lay-on="doAddDiscuss"
                            class="layui-btn layui-btn-warm layui-btn-radius">添加</button>
                </div>
            </div>

            <div id="discuss-detail-div" style="padding-bottom: 20px;padding-left: 40px;display: none">
                <h2>标题</h2>
                <div style="padding-top: 10px">
                    作者:<span>也些宝</span>&nbsp;&nbsp;&nbsp;
                    发表于:<span>2025-10-10</span>&nbsp;&nbsp;&nbsp;
                    阅读量:<span>100</span>&nbsp;&nbsp;&nbsp;
                    点赞数:<span>100</span>&nbsp;&nbsp;&nbsp;
                </div>
                <div style="padding-top: 20px">
                    正文.......................................
                    <br>
                    .......................................
                    <br>
                    .......................................
                    <br>
                    .......................................
                </div>
                <div style="margin: 16px;">
                    <i lay-on="doSupport" lay-data = "1" class="layui-icon layui-icon-praise" style="font-size: 30px; color: #f39b12;"></i>
                </div>
                <hr>
                <div>
                    <h3>发布评论</h3>
                    <div style = "margin-top:20px">
                        <div class="layui-input-group" style = "width: 80%">
                            <div class="layui-input-prefix" style="width: 100px;">张三</div>
                            <textarea id="comment-content-input" name="" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                        <div style = "margin-top: 20px;text-align: center">
                            <button type="button" style="width: 10%" lay-on="doAddComment"
                                    class="layui-btn layui-btn-warm layui-btn-radius">发布</button>
                        </div>
                    </div>
                </div>
                <hr>
                <div>
                    <h3>评论列表</h3>
                    <div style="margin-top: 30px">
                        <b>张山</b>：xxxxxx
                    </div>
                </div>
            </div>

            <div id="about-content" class="layui-card layui-panel" style="display:none">
                <div class="layui-card-header layui-font-16">
                    关于本系统亮点：
                    <ol>
                        <li>1.采用并发编程技术提升项目执行效率，并通过线程编排确保任务的有序执行。</li>
                        <li>2.利用分布式锁保障大模型接口调用的安全性与稳定性，支持锁重入、自动续期、防止误删以及单点分布锁故障处理等功能。</li>
                        <li>3.关键操作中加入幂等性判断，基于自定义注解结合 Redis 实现，提升系统稳定性与安全性。</li>
                        <li>4.广泛应用多种设计模式开发项目，包括责任链模式保障安全性，工厂模式提升执行效率，建造者模式简化对象创建和赋值，生产者-消费者模式实现异步通信及模块解耦，观察者模式支持数据实时读取，懒汉模式优化资源利用等。</li>
                        <li>5.通过消息队列（MQ）实现系统削峰填谷，确保整个流程执行的完整性和稳定性。</li>
                        <li>6.借助 Canal 监控 MySQL Binlog，有效解决数据库与 Redis 之间的数据一致性问题。</li>
                        <li>7.采用分库分表技术提升数据库的并发处理能力。</li>
                        <li>8.针对高并发场景进行稳定性设计，支持自定义拒绝策略，保障任务不丢失，并及时通知负责人进行人工补偿处理。</li>
                        <li>9.支持云端与本地大模型调用，覆盖近百种大模型，满足多样化需求。</li>
                        <li>10.项目聚焦人工智能领域，具有广阔的发展前景与市场潜力。</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-footer" style="height: 80px;line-height: 80px">
        <!-- 底部固定区域 -->
        <div class="layui-input-group" style="width: 80%">
            <input id="question-input" style="margin-top: 21px;margin-left: 150px" type="text" placeholder="请输入问题" class="layui-input">
            <div class="layui-input-suffix">
                <button id="question-send" type="button" style="margin-left: 60px;" lay-on="question-send"
                        class="layui-btn layui-btn-radius">发送</button>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/jwtUtil.js"></script>
<script src="/js/appVariable.js"></script>
<script src="/js/marked.min.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var jQuery = layui.$;
        var questionType = "chat";//默认当前使用聊天功能
        var firstLoadDrawHistory = true;//是否第一次加载绘图历史记录
        var laypage = layui.laypage;//layui.laypage 是 Layui 官方提供的分页组件
        var chat_succ_maxcount = 5;//成功生成数据的最大模型个数，写死6个，减到零再更新，用于发送按钮不可用功能
        var draw_succ_maxcount = 4;//同上，绘图
        //是否登录的一个判断
        function isLogin(){
            //layui.data(key) 是 Layui 提供的本地存储读写方法，用于获取 localStorage 中对应 key 的数据.
            var authorization = layui.data(login_user_info_key).authorization;
            //未登录状态
            if(authorization == null){
                //显示未登录按钮
                jQuery("#unlogin_btn_div").show();
                //隐藏用户信息div
                jQuery("#user_info_div").hide();
                //输入和发送按钮不可用
                jQuery("#question-input").attr("disabled",true);
                jQuery("#question-send").attr("disabled",true);
            }else{//已登录状态
                jQuery('#unlogin_btn_div').hide();
                jQuery("#username_span").html(layui.data(login_user_info_key).username);
                //输入和发送按钮恢复可用
                jQuery("#question-input").remove("disabled",true);
                jQuery("#question-send").remove("disabled",true);
            }
        }

        //封装推荐/最新列表的回调
        function doDiscussList(type,showDiv,pageDiv){
            callback  = function(res) {
                if (res.code == 200) {
                    var createHtml = "";
                    if (res.data.records.length > 0) {
                        for (var i = 0; i < res.data.records.length; i++) {
                            var record = res.data.records[i];
                            createHtml += '<div class="layui-card layui-panel">\n' +
                                '                    <div lay-on="doShowDiscuss" lay-data="' + record.did
                                + '" class="layui-card-header layui-font-16">\n' +
                                '                       ' + record.title + '\n' +
                                '                    </div>\n' +
                                '                    <div class="layui-card-body">\n' +
                                '                        ' + record.content + '\n' +
                                '                    </div>\n' +
                                '                </div>';
                        }
                        createHtml += ' <div id="'+pageDiv+'"></div>'
                    }
                } else {
                    createHtml += '<h3>暂无数据！</h3>'
                }
                jQuery("#" + showDiv).html(createHtml);
                //绘制分页列表
                laypage.render({
                    elem: pageDiv,
                    count: res.data.total,//数据总数
                    limit: 3,
                    curr: res.data.current,//当前页码
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            var page = obj.curr;
                            authAjax(jQuery, "/discuss/list", {page: page, type: type}, callback);
                        }
                    }
                })
            }
            authAjax(jQuery,"/discuss/list",{page:1,type:type},callback);
        }

        //封装话题详情页回调
        function disscussDetailCallback(res) {
            if(res.code == 200){
                //打印res
                console.log(res);
                var discuss = res.data.discuss;
                var commentList = res.data.commentList;
                var html = '<h2>'+discuss.title+ '</h2>\n' +
                    '                <div style="padding-top: 10px">\n' +
                    '                    作者:<span>'+discuss.username+ '</span>&nbsp;&nbsp;&nbsp;\n' +
                    '                    发表于:<span>'+discuss.createtime+ '</span>&nbsp;&nbsp;&nbsp;\n' +
                    '                    阅读量:<span>'+discuss.readcount+ '</span>&nbsp;&nbsp;&nbsp;\n' +
                    '                    点赞数:<span id="discuss-support-count">'+discuss.supportcount+ '</span>&nbsp;&nbsp;&nbsp;\n' +
                    '                </div>\n' +
                    '                <div style="padding-top: 20px">\n' +
                    '                    '+discuss.content+ '\n' +
                    '                </div>\n' +
                    '                <div style="margin: 16px;">\n' +
                    '                    <i lay-on="doSupport" lay-data = " '+discuss.did
                    + '" class="layui-icon layui-icon-praise" style="font-size: 30px; color: #f39b12;"></i>\n' +
                    '                </div>\n' +
                    '                <hr>\n' +
                    '                <div>\n' +
                    '                    <h3>发布评论</h3>\n' +
                    '                    <div style = "margin-top:20px">\n' +
                    '                        <div class="layui-input-group" style = "width: 80%">\n' +
                    '                            <div class="layui-input-prefix" style="width: 100px;">'+layui.data(login_user_info_key).username+'</div>\n' +
                    '                            <textarea id="comment-content-input" name="" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
                    '                        </div>\n' +
                    '                        <div style = "margin-top: 20px;text-align: center">\n' +
                    '                            <button type="button" style="width: 10%" lay-on="doAddComment" lay-data="'+discuss.did
                    + '" \n' +
                    '                                    class="layui-btn layui-btn-warm layui-btn-radius">发布</button>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '                <hr>\n' +
                    '                <div>\n' +
                    '                    <h3>评论列表</h3>\n';
                if(commentList != null&&commentList.length>0){
                    for(var i=0;i<commentList.length;i++){
                        var comment = commentList[i];
                        html += '<div style="margin-top: 30px">\n' +
                            '                        <b>'+comment.username+'</b>：'+comment.content+'\n' +
                            '                    </div>';
                    }
                }else{
                    html += '<div style="margin-top: 30px">\n' +
                        '                        暂无评论\n' +
                        '                    </div>';
                }
                jQuery("#discuss-detail-div").html(html+"</div>");

            }else{
                layer.msg("获取话题详情失败："+res.msg);
            }
        }
        //封装我的讨论列表的HTML
        function getMyDiscussHtml(res){
            return ' <div class="layui-col-md6">\n' +
                '                            <div class="layui-card">\n' +
                '                                <div class="layui-card-header">\n' +
                '<a lay-on = "doShowDiscuss" lay-data="' + res.did +'">'+
                res.title+'</a>                                   \n' +
                '                                    <button lay-on="doDeleteDiscuss" lay-data="'+
                res.did+
                '" style="float: right; margin-right: 0;" type="button" class="layui-btn layui-btn-sm layui-btn-primary">\n' +
                '                                             <i class="layui-icon layui-icon-delete"></i>\n' +
                '                                        </button>\n' +
                '                                </div>\n' +
                '                                <div class="layui-card-body">\n' +
                res.content+'                                    \n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                        </div>';
        }
        //获取我的讨论话题
        function getMyDiscuss(){
            callback  = function(res){
                if(res.code == 200){
                    // layer.msg("获取成功");
                    var html = '';
                    for(var i = 0; i < res.data.length; i++){
                        html += getMyDiscussHtml(res.data[i]);
                    }
                    jQuery("#my-discuss-list").html(html)
                }else{
                    layer.msg("获取失败"+res.msg);
                }
            };
            authAjax(jQuery,'/discuss/getmylist',{},callback);
        }
        //封装页面问答的html
        function createChatHtml(question,answer){
            return '<div class="layui-card layui-panel">' +
                '<div class="layui-card-header layui-font-16">' +
                question  + '' +
                '</div>' +
                '<div class="layui-card-body">' +
                marked.parse(answer)  +'' +
                '</div>' +
                '</div>';
        }
        //封装页面绘图的html
        function createDrawHtml(question,answer){
            return '<div class="layui-card layui-panel">' +
                '<div class="layui-card-header layui-font-16">' +
                question  + '' +
                '</div>' +
                '<div class="layui-card-body">' +'<img src="'+
                answer  +'" />' +
                '</div>' +
                '</div>';
        }
        //封装对话历史信息基础回调方法；
        function baseDoShowChatList(showDiv,res){
            if(res.code == 200){
                var html  = '';
                for(var i = 0; i < res.data.length; i++){
                    var answer = res.data[i];
                    html +=createChatHtml(answer.title,answer.content);
                }
                jQuery("#"+showDiv).html(html);
            }
        }

        //封装绘图历史信息基础回调方法；
        function baseDoShowDrawList(showDiv,res){
            if(res.code == 200){
                var html  = '';
                for(var i = 0; i < res.data.length; i++){
                    var answer = res.data[i];
                    html +=createDrawHtml(answer.title,answer.content);
                }
                jQuery("#"+showDiv).html(html);
            }
        }


        //显示OpenAI历史对话信息
        function showOpenAIChatHistory(){
            //回调方法
            function doShowList(res) {
                baseDoShowChatList('chat-chatgpt-content',res);
            }
            authAjax(jQuery,'/openai/getchatlist',{},doShowList);
        }

        //显示OpenAI历史绘图信息
        function showOpenAIDrawHistory(){
            if(firstLoadDrawHistory) {
                //回调方法
                function doShowList(res) {
                    baseDoShowDrawList('draw-chatgpt-content',res);
                }
                authAjax(jQuery, '/openai/getdrawlist', {}, doShowList)
            }
        }

        //显示通义千问历史对话信息
        function showTongyiChatHistory(){
            //回调方法
            function doShowList(res) {
                baseDoShowChatList('chat-tongyi-content',res);
            }
            authAjax(jQuery,'/tongyi/getchatlist',{},doShowList);
        }

        //显示通义万相历史绘图信息
        function showTongyiDrawHistory(){
            if(firstLoadDrawHistory) {
                //回调方法
                function doShowList(res) {
                    baseDoShowDrawList('draw-tongyi-content',res);
                }
                authAjax(jQuery, '/tongyi/getdrawlist', {}, doShowList)
            }
        }
        //显示讯飞星火历史对话信息
        function showXunfeiChatHistory(){
            //回调方法
            function doShowList(res) {
                baseDoShowChatList('chat-xunfei-content',res);
            }
            authAjax(jQuery,'/xunfei/getchatlist',{},doShowList);
        }
        //显示讯飞星火历史绘图信息
        function showXunfeiDrawHistory(){
            if(firstLoadDrawHistory) {
                //回调方法
                function doShowList(res) {
                    baseDoShowDrawList('draw-xunfei-content',res);
                }
                authAjax(jQuery, '/xunfei/getdrawlist', {}, doShowList)
            }
        }
         //显示文心一言历史对话信息
        function showWenxinChatHistory(){
            //回调方法
            function doShowList(res) {
                 baseDoShowChatList('chat-wenxin-content',res);
            }
             authAjax(jQuery,'/qianfan/getchatlist',{},doShowList);
        }
         //显示文心一言历史绘图信息
        function showWenxinDrawHistory(){
            if(firstLoadDrawHistory) {
                //回调方法
                function doShowList(res) {
                    baseDoShowDrawList( 'draw-wenxin-content',res)
                }
                authAjax(jQuery, '/qianfan/getdrawlist', {}, doShowList)
            }
        }
        //显示豆包历史对话信息
        function showDoubaoChatHistory(){
             //回调方法
             function doShowList(res) {
                  baseDoShowChatList('chat-doubao-content',res);
             }
             authAjax(jQuery,'/doubao/getchatlist',{},doShowList);
        }
        //显示豆包历史绘图信息
        function showDoubaoDrawHistory(){
            if(firstLoadDrawHistory) {
                //回调方法
                function doShowList(res) {
                    baseDoShowDrawList('draw-doubao-content',res);
                }
                authAjax(jQuery, '/doubao/getdrawlist', {}, doShowList)
            }
        }
         //显示deepseek历史对话信息
        function showDeepseekChatHistory(){
            //回调方法
            function doShowList(res) {
                 baseDoShowChatList('chat-deepseek-content',res);
            }
            authAjax(jQuery,'/deepseek/getchatlist',{},doShowList);
        }
         //显示deepseek历史绘图信息
        function showDeepseekDrawHistory(){
            if(firstLoadDrawHistory) {
                var html = '';
                //回调方法
                function doShowList(res) {
                    html = '<h3>'+res.data+'</h3>'
                    jQuery("#draw-deepseek-content").html( html);
                }
                authAjax(jQuery, '/deepseek/getdrawlist', {}, doShowList)
            }
        }

        //封装对话功能基础回调
        function baseChatCallback(showdiv,question,res){
            if(res.code == 200){
                //添加到页面最前面
                jQuery("#"+showdiv).prepend(createChatHtml(question,res.data));
                var model = "";
                if(showdiv == "chat-chatgpt-content"){
                    model = "ChatGPT";
                }else if(showdiv == "chat-tongyi-content"){
                    model = "通义千问";
                }else if(showdiv == "chat-xunfei-content"){
                    model = "讯飞星火";
                }else if(showdiv == "chat-wenxin-content"){
                    model = "文心一言";
                }else if(showdiv == "chat-doubao-content"){
                    model = "豆包";
                }else if(showdiv == "chat-deepseek-content"){
                    model = "DeepSeek";
                }
                layer.msg(model+"生成成功！");
                chat_succ_maxcount =  chat_succ_maxcount - 1;
                if(chat_succ_maxcount == 0){
                    //发送按钮恢复
                    jQuery("#question-send").removeAttr("disabled");
                    jQuery("#question-send").html("发送");
                    //清空输入框
                    jQuery("#question-input").val("");
                    chat_succ_maxcount = 5;
                }
            }else {
                layer.msg("出错了：" + res.msg);
                //清空输入框
                jQuery("#question-input").val("");
            }

        }

        //封装绘图功能基础回调
        function baseDrawCallback(showdiv,question,res){
            if(res.code == 200){
                //添加到页面最前面
                jQuery("#"+showdiv).prepend(createDrawHtml(question,res.data));
                var model = "";
                if(showdiv == "draw-chatgpt-content"){
                    model = "ChatGPT";
                }else if(showdiv == "draw-tongyi-content"){
                    model = "通义千问";
                }else if(showdiv == "draw-xunfei-content"){
                    model = "讯飞星火";
                }else if(showdiv == "draw-wenxin-content"){
                    model = "文心一言";
                }else if(showdiv == "draw-doubao-content"){
                    model = "豆包";
                }
                layer.msg(model+"生成成功！");
                draw_succ_maxcount =  draw_succ_maxcount - 1;
                if(draw_succ_maxcount == 0){
                    //发送按钮恢复
                    jQuery("#question-send").removeAttr("disabled");
                    jQuery("#question-send").html("发送");
                    //清空输入框
                    jQuery("#question-input").val("");
                    chat_succ_maxcount = 4;
                }
            }else {
                layer.msg("出错了：" + res.msg);
                //清空输入框
                jQuery("#question-input").val("");
            }

        }

        //调用OpenAI对话功能
        function doOpenAIChat(question){
            function callback(res){
                baseChatCallback("chat-chatgpt-content",question,res);
            }
            //发送请求
            authAjax(jQuery,"/openai/chat",{question:question},callback);
        }

        //调用OpenAI绘图功能
        function doOpenAIDraw(question){
            function callback(res){
                baseDrawCallback("draw-chatgpt-content",question,res);
            }
            //发送请求
            authAjax(jQuery,"/openai/draw",{question:question},callback);
        }

        //调用通义千问对话功能
        function doTongyiChat(question){
            function callback(res){
                baseChatCallback("chat-tongyi-content",question,res);
            }
            //发送请求
            authAjax(jQuery,"/tongyi/chat",{question:question},callback)
        }

        //调用通义万相绘图功能
        function doTongyiDraw(question){
            function callback(res){
                baseDrawCallback("draw-tongyi-content",question,res);
            }
            //发送请求
            authAjax(jQuery,"/tongyi/draw",{question:question},callback);
        }
        //调用讯飞星火对话功能
        function doXunfeiChat(question){
            function callback(res){
                baseChatCallback("chat-xunfei-content",question,res);
            }
            //发送请求
            authAjax(jQuery,"/xunfei/chat",{question:question},callback);
        }
         //调用讯飞星火绘图功能
        function doXunfeiDraw(question){
             function callback(res){
                baseDrawCallback("draw-xunfei-content",question,res);
            }
            authAjax(jQuery,"/xunfei/draw",{question:question},callback);
        }
        //调用文心一言对话功能
        function doWenxinChat(question){
            function callback(res){
                baseChatCallback("chat-wenxin-content",question,res);
            }
            //发送请求
            authAjax(jQuery,"/qianfan/chat",{question:question},callback);
        }
         //调用文心一言绘图功能
        function doWenxinDraw(question){
            function callback(res){
                 baseDrawCallback("draw-wenxin-content",question,res);
            }
            authAjax(jQuery,"/qianfan/draw",{question:question},callback);
        }
        //调用豆包对话功能
        function doDoubaoChat(question){
            function callback(res){
                baseChatCallback("chat-doubao-content",question,res);
            }
            //发送请求
            authAjax(jQuery,"/doubao/chat",{question:question},callback);
        }
         //调用豆包绘图功能
        function doDoubaoDraw(question){
            function callback(res){
                 baseDrawCallback("draw-doubao-content",question,res);
            }
            authAjax(jQuery,"/doubao/draw",{question:question},callback);
        }
        //调用deepseek对话功能
        function doDeepseekChat(question){
            function callback(res){
                baseChatCallback("chat-deepseek-content",question,res);
            }
            //发送请求
            authAjax(jQuery,"/deepseek/chat",{question:question},callback);
        }
         //调用deepseek绘图功能
         function doDeepseekDraw(question){
              function callback(res){
                  jQuery("#question-input").val("");
              }
             authAjax(jQuery,"/deepseek/draw",{question:question},callback);
         }

        //页面加载完成之后执行的初始化事件
        layer.ready(function(){
            //登陆状态判断
            isLogin();
            //显示openai历史对话信息
            showOpenAIChatHistory();
            //显示通义千问历史对话信息
            showTongyiChatHistory();
            //显示讯飞星火历史对话信息
            showXunfeiChatHistory();
            //显示文心一言历史对话信息
            showWenxinChatHistory();
            //显示豆包历史对话信息
            showDoubaoChatHistory();
            //显示deepseek历史对话信息
            showDeepseekChatHistory();
        })
        //点击事件
        util.on('lay-on',{
            'chat-nav-show': function(othis){//显示对话标签页
                jQuery('#chat-nav').show();
                jQuery('#draw-nav').hide();
                jQuery('#discuss-nav').hide();
                //标签页重置显示第一个
                var showDivId = "chat-chatgpt-content";
                jQuery("#"+showDivId).show();//显示自己的内容
                jQuery("#"+showDivId).siblings().hide();//隐藏所有同级div的内容
                //重置标签页样式
                jQuery("#chat-nav").find("li").removeClass("layui-this");
                jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");
                //显示问题输入区域
                jQuery(".layui-footer").show();
                //当前使用聊天功能
                questionType = "chat";
            },
            'draw-nav-show': function(othis){//显示绘图标签页
                jQuery('#chat-nav').hide();
                jQuery('#draw-nav').show();
                jQuery('#discuss-nav').hide();
                //标签页重置显示第一个
                var showDivId = "draw-chatgpt-content";
                jQuery("#"+showDivId).show();//显示自己的内容
                jQuery("#"+showDivId).siblings().hide();//隐藏所有同级div的内容
                //重置标签页样式
                jQuery("#draw-nav").find("li").removeClass("layui-this");
                jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");
                //显示问题输入区域
                jQuery(".layui-footer").show();
                //当前使用绘画功能
                questionType = "draw";
                //显示chatgpt绘图历史记录
                showOpenAIDrawHistory();
                //显示通义千问绘图历史记录
                showTongyiDrawHistory();
                //显示讯飞星火绘图历史记录
                showXunfeiDrawHistory();
                //显示文心一言绘图历史记录
                showWenxinDrawHistory();
                //显示豆包绘图历史记录
                showDoubaoDrawHistory();
                //显示deepseek绘图历史记录
                showDeepseekDrawHistory();
            },
            'discuss-nav-show': function(othis){//显示话题讨论标签页
                jQuery('#chat-nav').hide();
                jQuery('#draw-nav').hide();
                jQuery('#discuss-nav').show();
                //标签页重置显示第一个
                var showDivId = "discuss-content";
                jQuery("#"+showDivId).show();
                jQuery("#"+showDivId).siblings().hide();
                //重置标签页样式
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                //隐藏问题输入区域
                jQuery(".layui-footer").hide();
                doDiscussList(1,"discuss-content","discuss-laypage-normal");
            },
            'about-nav-show': function(othis){//显示关于标签页
                jQuery('#chat-nav').hide();
                jQuery('#draw-nav').hide();
                jQuery('#discuss-nav').hide();
                //标签页显示
                var showDivId = "about-content";
                jQuery("#"+showDivId).show();
                jQuery("#"+showDivId).siblings().hide();
                //隐藏问题输入区域
                jQuery(".layui-footer").hide();
            },
            'nav-change-content':function (e) {//根据标签页切换显示不同的内容
                var showDivId = jQuery(e).attr("lay-data");
                jQuery("#"+showDivId).show();//显示自己的内容
                jQuery("#"+showDivId).siblings().hide();//隐藏所有同级div的内容
                if(showDivId == "discuss-content-new"){
                    doDiscussList(2,"discuss-content-new","discuss-new-laypage-normal");
                }
                if(showDivId == "discuss-content"){
                    doDiscussList(1,"discuss-content","discuss-laypage-normal");
                }
            },
            'question-send':function () {//发送问题
                var question = jQuery("#question-input").val();
                if(question == null || question == ""){
                    layer.msg("请输入问题");
                    return;
                }
                //设置发送按钮不可用
                jQuery("#question-send").attr("disabled","disabled");
                jQuery("#question-send").html("生成中...");
                if(questionType == "chat"){//当前使用的是聊天功能
                    doOpenAIChat(question);//调用OpenAI对话功能
                    doTongyiChat(question);//调用通义千问对话功能
                    doXunfeiChat(question);//调用讯飞星火对话功能
                    doWenxinChat(question);//调用文心一言对话功能
                    doDoubaoChat(question);//调用豆包对话功能
                    doDeepseekChat(question);//调用deepseek对话功能

                }else if(questionType == "draw"){
                    doOpenAIDraw(question);//调用OpenAI绘画功能
                    doTongyiDraw(question);//调用通义绘画功能
                    doXunfeiDraw(question);//调用讯飞星火绘画功能
                    doWenxinDraw(question);//调用文心一言绘画功能
                    doDoubaoDraw(question);//调用豆包绘画功能
                    doDeepseekDraw(question);//调用deepseek绘画功能
                }
            },
            'doLogin':function (){//弹出登录框
                layer.open({
                    type: 2,
                    title: '登录',
                    area: ['360px', '400px'],
                    skin: 'layui-layer-rim', // 加上边框
                    content: ['/login.html', 'no'], // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
                    move: false// 禁止拖动
                });
            },
            'loginOut':function (){//退出登录
                layer.confirm('确认要退出吗？', {
                    btn: ['确定', '关闭'] ,//按钮
                    title: '提示',
                    move: false// 禁止拖动
                }, function(){
                    //1.清除localstorage里的信息
                    layui.data(login_user_info_key,null);
                    //2.判断是否登录
                    isLogin();
                    //4.显示信息
                    layer.msg('退出成功', {icon: 1});
                }, function(){
                });
            },
            'add-discuss':function (){//点击发表话题
                jQuery('#chat-nav').hide();
                jQuery('#draw-nav').hide();
                jQuery('#discuss-nav').hide();
                //标签页重置显示第一个
                var showDivId = "add-discuss-content";
                jQuery("#"+showDivId).show();
                jQuery("#"+showDivId).siblings().hide();
                //重置标签页样式
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                //隐藏问题输入区域
                jQuery(".layui-footer").hide();
            },
            'doAddDiscuss':function(){//发布话题
                title = jQuery("#discuss-title-input");
                content = jQuery("#discuss-content-input");
                if(title.val() == "" || title.val() == null){
                    layer.msg("请输入话题标题!");
                    title.focus();
                    return;
                }
                if(content.val() == "" || content.val() == null){
                    layer.msg("请输入话题内容!");
                    content.focus();
                    return;
                }
                authAjax(jQuery, "/discuss/add", {title:title.val(), content:content.val()}, function(res){
                    if(res.code == 200){
                        layer.msg("发布成功!");
                        //重置表单
                        title.val("");
                        content.val("");
                    }else {
                        layer.msg(res.msg);
                    }
                })
            },
            'show-my-discuss-list': function(){//点击显示我的话题列表
                jQuery('#chat-nav').hide();
                jQuery('#draw-nav').hide();
                jQuery('#discuss-nav').hide();
                //标签页重置显示第一个
                var showDivId = "my-discuss-content";
                jQuery("#"+showDivId).show();
                jQuery("#"+showDivId).siblings().hide();
                //重置标签页样式
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                //隐藏问题输入区域
                jQuery(".layui-footer").hide();
                getMyDiscuss()//获取我的帖子
            },
            'doDeleteDiscuss':function (data){
                layer.confirm('确认要删除吗？', {
                    btn: ['确定', '关闭'] ,//按钮
                    title: '提示',
                    move: false// 禁止拖动
                }, function(){//删除
                    //获取lay-data
                    var did = data.attr("lay-data");
                    callback = function (res) {
                        if(res.code == 200){
                            layer.msg("删除成功!");
                            getMyDiscuss()//更新我的帖子
                        }else {
                            layer.msg(res.msg);
                        }
                    }
                    authAjax(jQuery, '/discuss/deletemylist', {did:did},callback)
                }, function(){
                });
            },
            "doShowDiscuss":function (data){ //点击显示话题详情
                jQuery('#chat-nav').hide();
                jQuery('#draw-nav').hide();
                jQuery('#discuss-nav').hide();
                //标签页重置显示第一个
                var showDivId = "discuss-detail-div";
                jQuery("#"+showDivId).show();
                jQuery("#"+showDivId).siblings().hide();
                //重置标签页样式
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                //隐藏问题输入区域
                jQuery(".layui-footer").hide();
                //获取lay-data
                var did = data.attr("lay-data");

                authAjax(jQuery, '/discuss/detail', {did:did},disscussDetailCallback);
            },
            "doAddComment":function (data){//添加评论
                var content = jQuery("#comment-content-input").val();
                var did = data.attr("lay-data");
                if(did == null||did.trim() == ""){
                    layer.msg("未绑定话题");
                }
                if(content == null||content.trim() == ""){
                    layer.msg("请输入内容");
                };
                callback = function (res) {
                    if(res.code == 200){
                        layer.msg("发表成功");
                        jQuery("#comment-content-input").val("");
                        //刷新评论列表
                        authAjax(jQuery, '/discuss/detail', {did:did},disscussDetailCallback);
                    }else{
                        layer.msg("发表失败："+res.msg);
                    }
                }
                authAjax(jQuery, '/discuss/addcomment', {did:did,content:content},callback);
            },
            "doSupport":function (data){//点赞事件
                //获取lay-data
                var did = data.attr("lay-data");
                callback = function (res) {
                    if(res.code == 200){
                        //更新点赞数
                        jQuery("#discuss-support-count").html(parseInt(jQuery("#discuss-support-count").html())+1);
                        layer.msg("点赞成功");
                    }else{
                        layer.msg("点赞失败："+res.msg);
                    }
                }
                authAjax(jQuery, '/discuss/surpport', {did:did},callback);
            }


        })

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function(othis){ // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function(){  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
    });
</script>
</body>
</html>